<template>
  <div class="date-box">
    <div class="date-overflow ui-center">
      <div class="date-list ui-flex">
        <div class="item ui-flex" :style="{ transform: 'translateX(' + -horizontalIndex * 214 + 'px)' }" v-for="item in schoolList" :key="item.date">
          <div class="left"></div>
          <div class="right">
            <div class="date">{{ item.date }}</div>
            <div class="text">{{ item.title }}</div>
          </div>
        </div>
      </div>
      <div class="date-btn ui-flex">
        <div :class="['btn prev', { on: horizontalAllowPrev }]" @click="SlideHorizontal(false)"></div>
        <div :class="['btn next', { on: horizontalAllowNext }]" @click="SlideHorizontal(true)"></div>
      </div>
    </div>
  </div>
  <div class="map-box ui-center ui-flex align-center">
    <div class="left">
      <div class="btn" @click="SlideVertical(false)"></div>
      <div class="list-box">
        <div class="list" :style="{ transform: 'translateY(' + -verticalIndex * 90 + 'px)' }">
          <div class="item ui-oneline" v-for="item in schoolList" :key="item.date" :title="item.title">{{ item.title }}</div>
        </div>
      </div>
      <div class="btn next" @click="SlideVertical(true)"></div>
    </div>
    <div class="right">
      <img class="map-img" src="@/assets/mock/map.png" />
    </div>
  </div>
</template>

<script setup>
let schoolList = ref([
  {
    date: '2023.03',
    title: '四川省西昌市四合九年一贯制学校'
  },
  {
    date: '2023.05',
    title: '从江县第二民族中学'
  },
  {
    date: '2023.09',
    title: '瑞丽市第二幼儿园'
  },
  {
    date: '2023.09',
    title: '瑞丽市姐告小学'
  },
  {
    date: '2023.09',
    title: '彭水县实验幼儿园'
  },
  {
    date: '2023.11',
    title: '重庆市万州区福建小学'
  },
  {
    date: '2023.12',
    title: '贵州省铜仁市思南县第一小学'
  },
  {
    date: '2024.01',
    title: '营山县太蓬完全小学'
  },
  {
    date: '2024.01',
    title: '澜沧拉祜族自治县木戛乡中心小学'
  },
  {
    date: '2024.04',
    title: '腾冲市猴桥镇蔡家寨幼儿园'
  },
  {
    date: '2024.04',
    title: '猴桥镇胆扎民族完全小学'
  },
  {
    date: '2024.05',
    title: '贵州省铜仁市德江县第八小学'
  }
]);

// 水平滚动
let horizontalIndex = ref(0),
  horizontalAllowNext = computed(() => horizontalIndex.value < schoolList.value.length - 7),
  horizontalAllowPrev = computed(() => horizontalIndex.value > 0);
const SlideHorizontal = isNext => {
  if (isNext && horizontalAllowNext.value) {
    horizontalIndex.value++;
  } else if (!isNext && horizontalAllowPrev.value) {
    horizontalIndex.value--;
  }
};

// 垂直滚动
let verticalIndex = ref(0),
  verticalAllowNext = computed(() => verticalIndex.value < schoolList.value.length - 6),
  verticalAllowPrev = computed(() => verticalIndex.value > 0);
const SlideVertical = isNext => {
  if (isNext && verticalAllowNext.value) {
    verticalIndex.value++;
  } else if (!isNext && verticalAllowPrev.value) {
    verticalIndex.value--;
  }
};
</script>

<style lang="scss" scoped>
.date-box {
  @include bgImg('@/assets/list/school-date.png');
  background-size: auto 435px;
  background-position: 0 bottom;
  box-sizing: border-box;
  padding: 0 0 284px 0;
  .date-overflow {
    padding: 82px 0 0 0;
    overflow: hidden;
    position: relative;
    .date-btn {
      position: absolute;
      top: 20px;
      left: 0;
      .btn {
        width: 32px;
        height: 32px;
        cursor: pointer;
        @include bgImg('@/assets/list/school-arrow.png');
        &.prev {
          transform: rotate(180deg);
        }
        &.next {
          margin-left: 20px;
        }
        &.on {
          @include bgImg('@/assets/list/school-arrow_on.png');
        }
      }
    }
  }
  .item {
    width: 214px;
    margin-top: 40px;
    flex-shrink: 0;
    transition: all 0.3s ease;
    &:nth-child(2n + 1) {
      margin-top: 0px;
    }
    .left {
      width: 12px;
      height: 181px;
      margin: 10px 0 0 0;
      @include bgImg('@/assets/list/school-date-line.png');
    }
    .right {
      font-size: 22px;
      color: #956e5c;
      line-height: 32px;
      padding: 0 0 0 15px;
      .date {
        font-weight: bold;
        padding: 0 0 7px 0;
      }
    }
  }
}
.map-box {
  margin-top: -150px;
  .left {
    width: 240px;
    .btn {
      width: 40px;
      height: 22px;
      @include bgImg('@/assets/list/menu-icon.png');
      margin: 0 auto 30px;
      cursor: pointer;
      &.next {
        transform: rotate(180deg);
        margin: 10px auto 0;
      }
    }
    .list-box {
      max-height: 540px;
      overflow: hidden;
      .list {
        transition: all 0.3s ease;
      }
    }
    .item {
      font-size: 18px;
      color: #494949;
      line-height: 70px;
      height: 70px;
      text-align: center;
      cursor: pointer;
      margin-bottom: 20px;
      padding: 0 30px;
      @include bgImg('@/assets/list/menu-bg.png');
      &:last-child {
        margin-bottom: 0;
      }
      &.on,
      &:hover {
        color: #9c2c29;
        @include bgImg('@/assets/list/menu-bg_on.png');
      }
    }
  }
  .right {
    padding: 0 0 0 163px;
    .map-img {
      width: 1097px;
      height: 789px;
    }
  }
}
</style>
